<%@ page import="java.sql.*" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=0.5">
    <title>
        购物界面
    </title>
    <link href="https://at.alicdn.com/t/c/font_4156699_i9rfozb6ac.css" rel="stylesheet">
    <link href="CSS/Shop.css" rel="stylesheet">
</head>
<style>
    h5 {
        text-align: center;
        font-size: 20px;
    }

    .mod_help_inner {
        display: flex;
        flex-wrap: wrap;
    }

    .mod_help_list {
        flex: 1 0 25%; /* 每个列表项占据四分之一的宽度 */
        padding: 0 15px; /* 设置左右间距 */
        box-sizing: border-box; /* 让 padding 不会增加元素宽度 */
    }

    ul {
        padding: 5px;
        list-style: none;
    }

    li {
        width: 200px;
        border: 3px solid #fbc89d;
        padding: 8px;
        text-align: center;
        margin-bottom: 3px;
        background: linear-gradient(to left, #a2e5fe, rgba(200, 141, 249, 0.06), rgba(127, 101, 206, 0.34), #d351cd);
    }

    a {
        text-decoration: none;
        color: #000000;
        font-size: 20px;
    }

    a:hover {
        text-decoration: underline;
        right: -10%;
    }

</style>
<body>
<table>
    <tr>
        <th style="width: 100px;height: 120px">
            <img src="photo/LF1.png" style="height: 120px;">
        </th>
        <th style="padding-left: 50px">
            <div style="padding-left: 408px">
                <form action="SearchProductOfShopping" method="get">
                    <div class="searchBar">
                        <div class="img1"><i class="iconfont icon-sousuoxiao"></i></div>
                        <div class="textInput">
                            <input class="inp" placeholder="请输入搜索关键字" type="text" name="searchKeyword">
                            <button class="goBtn" type="submit">go</button>
                            <div class="clear"><i class="iconfont icon-close"></i></div>
                        </div>
                    </div>
                </form>
            </div>
            <br>
            <button onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                百亿补贴
            </button>
            <button onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                百亿补贴
            </button>
            <button onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                万人团购
            </button>
            <button onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                天天特卖
            </button>
            <button onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                办公用品
            </button>
            <button onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                有奖竞猜
            </button>
            <button onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                活动优惠
            </button>
        </th>
        <th>
            <div class="nav h" style="  top: -6px;">
                <!-- 菜单切换部分 -->
                <div class="toggle">
                    <span></span>
                </div>
                <!-- 列表部分 -->
                <ul>
                    <li style="--i:0">主菜单</li>
                    <li onclick="function ShoppingCart() {
            window.location.href='shopcar.jsp';
        }
        ShoppingCart()" style="--i:1">购物车
                    </li>

                    <li onclick="function account() {
            window.location.href='LoginRegisterPage.jsp';
        }
        account()" style="--i:2">账户

                    <li onclick="function about() {
            window.location.href='upload.html';
        }
        about()" style="--i:3">关于
                    <li onclick="function set() {

            window.location.href='upload.html';
        }
       set()" style="--i:4">设置
                </ul>
            </div>
        </th>
    </tr>
</table>
<table>
    <tr style="border: none;">
        <td class="cebian button" style="width: 20%;">
            <ul>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    家用电器
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    手机、数码、通信
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    电脑、办公
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    家居、家具、家装、厨具
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    男装、女装、童装、内衣
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    个户化妆、清洁用品、宠物
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    鞋靴、箱包、珠宝、奢侈品
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    运动户外、钟表
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    汽车、汽车用品
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    母婴、玩具乐器
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    食品、酒类、生鲜、特产
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    医药保健
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    图书、音像、电子书
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    彩票、旅行、充值、票务
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    理财、众筹、白条、保险
                </li>
            </ul>
        </td>
        <td style="width:60%">
            <iframe src="HTML/ShopHead.html" height=675px width=95%
                    style="padding-left: 30px;color: transparent"></iframe>
        </td>
        <td class="cebian" style="padding-right:20px">
            <ul>

                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    购物指南
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    购物流程
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    会员介绍
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    会员介绍
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    生活旅行/团购
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    常见问题
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    大家电
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    服装城
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    美妆馆
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    传智超市
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    全球购
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    全球购
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    闪购
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    团购
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    拍卖
                </li>
            </ul>
        </td>
    </tr>
</table>
<div class="product-container">
    <%
    String url = "jdbc:mysql://localhost:3306/course_design";
    String username = "root";
    String password = "123456";
    Connection conn = null;
    try {
    Class.forName("com.mysql.cj.jdbc.Driver");
    conn = DriverManager.getConnection(url, username, password);
    if (conn != null) {
    Statement stmt = conn.createStatement();
    String sql = "SELECT * FROM products";
    ResultSet rs = stmt.executeQuery(sql);
    String productName1 = null;
    int counter = 0; // 计数器，用于判断每行显示的个数
    while (rs.next()) {
    String productName = rs.getString("pname");
    if (productName.length() > 30) {
    productName1 = productName.substring(0, 30) + "...";
    }
    String productDetail = rs.getString("Product_detail");
    String productUrl = rs.getString("url");
    double productPrice = rs.getDouble("pprice");
    %>

    <div class="product-item">
        <a href="<%= productDetail %>" target="_blank">
            <img src="<%= productUrl %>" alt="<%= productName %>">
        </a>
        <h3 title="<%= rs.getString(" pname") %>"><%= productName1 %>
        </h3>
        <div style="text-align: center;font-size: 22px">价格：￥<%= productPrice %>
        </div>
        <div style="text-align: center;font-size: 15px; text-decoration: line-through;">
            原价：<%=productPrice - productPrice / 5%>
        </div>
        <div style="text-align: center;">
            <button onclick="dropAndRiseAnimation('<%= productName %>',this)">加入购物车</button>
        </div>
        <div id="animationBox">
            <p id="animationText"></p>
        </div>
    </div>
    <%
    counter++;
    // 如果已经显示了5个商品，则换行
    if (counter % 5 == 0) {
    %>
</div>
<div class="product-container">
    <%
    }
    }
    rs.close();
    stmt.close();
    } else {
    System.err.println("数据库连接失败");
    }
    } catch (Exception e) {
    e.printStackTrace(System.err);
    } finally {
    try {
    if (conn != null) {
    conn.close();
    }
    } catch (SQLException e) {
    e.printStackTrace(System.err);
    }
    }
    %>
</div>
<h1 class="container1"><img src="photo/1.png" width="1450px" class="middle-image">
    <img src="photo/3.jpg" width="1450px" height="300px" style="top:200px" class="bottom-image"><img
            src="photo/first.png" width="1450px" class="top-image"><img
            src="photo/2.png" width="1450px"></h1>
<table>
    <tr>
        <td class="cebian" style="position: fixed;">
            <h5>购物指南</h5>
            <ul>
                <li>
                    <a href="//help.jd.com/user/issue/list-29.html" target="_blank" rel="noopener noreferrer">
                        购物流程
                    </a>
                </li>
                <li>
                    <a href="//help.jd.com/user/issue/list-151.html" target="_blank" rel="noopener noreferrer">
                        会员介绍
                    </a>
                </li>
                <li>
                    <a href="//help.jd.com/user/issue/list-297.html" target="_blank" rel="noopener noreferrer">
                        生活旅行
                    </a>
                </li>
                <li>
                    <a href="//help.jd.com/user/issue.html" target="_blank" rel="noopener noreferrer">
                        常见问题
                    </a>
                </li>
                <li>
                    <a href="//help.jd.com/user/issue/list-136.html" target="_blank" rel="noopener noreferrer">
                        大家电
                    </a>
                </li>
                <li>
                    <a href="//help.jd.com/user/custom.html" target="_blank" rel="noopener noreferrer">
                        联系客服
                    </a>
                </li>
            </ul>
        </td>
        <td class="cebian">
            <h5>配送方式</h5>
            <ul>
                <li>
                    <a href="//help.jd.com/user/issue/list-81-100.html" target="_blank" rel="noopener noreferrer">
                        上门自提
                    </a>
                </li>
                <li>
                    <a href="//help.jd.com/user/issue/list-81.html" target="_blank" rel="noopener noreferrer">
                        211限时达
                    </a>
                </li>
                <li>
                    <a href="//help.jd.com/user/issue/list-82.html" target="_blank" rel="noopener noreferrer">
                        配送服务查询
                    </a>
                </li>
                <li>
                    <a href="//help.jd.com/user/issue/109-188.html" target="_blank" rel="noopener noreferrer">
                        配送费收取标准
                    </a>
                </li>
                <li>
                    <a href="//help.jd.com/user/issue/list-175.html" target="_blank" rel="noopener noreferrer">
                        东风快递 使命必达
                    </a>
                </li>
            </ul>
        </td>
        <td class="cebian">
            <h5>支付方式</h5>
            <ul>
                <li>
                    <a href="//help.jd.com/user/issue/list-172.html" target="_blank" rel="noopener noreferrer">
                        货到付款
                    </a>
                </li>
                <li>
                    <a href="//help.jd.com/user/issue/list-173.html" target="_blank" rel="noopener noreferrer">
                        在线支付
                    </a>
                </li>
                <li>
                    <a href="//help.jd.com/user/issue/list-176.html" target="_blank" rel="noopener noreferrer">
                        分期付款
                    </a>
                </li>
                <li>
                    <a href="//help.jd.com/user/issue/list-175.html" target="_blank" rel="noopener noreferrer">
                        公司转账
                    </a>
                </li>
                <li>
                    <a href="//help.jd.com/user/issue/list-175.html" target="_blank" rel="noopener noreferrer">
                        我给你钱行不行
                    </a>
                </li>
            </ul>
        </td>
        <td class="cebian">
            <h5>售后服务</h5>
            <ul>
                <li>
                    <a href="//help.jd.com/user/issue/list-112.html" target="_blank" rel="noopener noreferrer">
                        售后政策
                    </a>
                </li>
                <li>
                    <a href="//help.jd.com/user/issue/list-132.html" target="_blank" rel="noopener noreferrer">
                        价格保护
                    </a>
                </li>
                <li>
                    <a href="//help.jd.com/user/issue/130-978.html" target="_blank" rel="noopener noreferrer">
                        退款说明
                    </a>
                </li>
                <li>
                    <a href="//myjd.jd.com/repair/repairs.action" target="_blank" rel="noopener noreferrer">
                        返修/退换货
                    </a>
                </li>
                <li>
                    <a href="//help.jd.com/user/issue/list-50.html" target="_blank" rel="noopener noreferrer">
                        取消订单
                    </a>
                </li>
            </ul>
        </td>
        <td class="cebian">
            <h5>特色服务</h5>
            <ul>
                <li>
                    <a href="//1paipai.jd.com/" target="_blank" rel="noopener noreferrer">
                        夺宝岛
                    </a>
                </li>
                <li>
                    <a href="//help.jd.com/user/issue/list-134.html" target="_blank" rel="noopener noreferrer">
                        DIY装机
                    </a>
                </li>
                <li>
                    <a href="//fuwu.jd.com/" target="_blank" rel="noopener noreferrer">
                        延保服务
                    </a>
                </li>
                <li>
                    <a href="//o.jd.com/market/index.action" target="_blank" rel="noopener noreferrer">
                        京东E卡
                    </a>
                </li>
                <li>
                    <a href="//mobile.jd.com/" target="_blank" rel="noopener noreferrer">
                        京东通信
                    </a>
                </li>
            </ul>
        </td>
    </tr>
</table>
<div class="mod_help_cover">
    <h5 class="mod_help_cover_tit">京东自营覆盖区县</h5>
    <div class="mod_help_cover_con">
        <p class="mod_help_cover_info">
            京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。
        </p>
        <p class="mod_help_cover_more">
            <a href="//help.jd.com/user/issue/103-983.html" target="_blank" rel="noopener noreferrer">
                查看详情
                <i class="iconfont"></i>
            </a>
        </p
        <script>
            // let nav = document.querySelector('.nav')
            // let toggle = document.querySelector('.toggle')
            //
            // toggle.addEventListener('click', () => {
            //     toggle.classList.toggle('active')
            //     nav.classList.toggle('active')
            // })
            //
            // // 1. 获取元素
            // let searchIcon = document.querySelector(".img1")
            // let clearIcon = document.querySelector(".clear")
            // let searchBar = document.querySelector(".searchBar")
            // let inp = document.querySelector(".inp")
            //
            // // 2. 点击，切换类 => 改宽实现展开
            // searchIcon.addEventListener("click", () => {
            //     searchBar.classList.toggle("changeWidth")
            // })
            // // 3. 点击清空
            // clearIcon.addEventListener("click", () => {
            //     inp.value = ""
            // })

            // window.addEventListener('CartMessage', (event) => {
            //     // 确保消息来自iframe的源
            //     if (event.source === document.querySelector('iframe').contentWindow && (event.source === document.getElementById('mobile').contentWindow)) {
            //         const message = event.data;
            //
            //         if (message.type === 'CartButtonClick') {
            //             // 处理按钮点击事件
            //             console.log(message.data);
            //             window.location.href = 'shopcar.jsp'
            //         }
            //     }
            // });
            // let cartAnimation = document.getElementById('cart-animation');
            // let iframeMobile = document.getElementById('mobile');
            // dropAndRiseAnimation('商品:' + name + '已经加入购物车\n期待您的购买', this);

            // function addToCart(name) {
            //     // window.alert('商品:' + name + '已经加入购物车\n期待您的购买');
            //     let cart = [];
            //     if (document.cookie.includes('cart=')) {
            //         const cookies = document.cookie.split(';');
            //         for (let i = 0; i < cookies.length; i++) {
            //             const cookie = cookies[i].trim();
            //             if (cookie.startsWith('cart=')) {
            //                 const cartJSON = decodeURIComponent(cookie.substring(5));
            //                 cart = JSON.parse(cartJSON);
            //                 break;
            //             }
            //         }
            //     }
            //     cart.push(name);
            //     const cartJSON1 = JSON.stringify(cart);
            //     document.cookie = 'cart=' + encodeURIComponent(cartJSON1) + '; expires=Thu, 01 Jan 2024 00:00:00 UTC; path=/;';
            //
            //     // 触发自定义事件，通知其他组件购物车有变化
            //     const event = new CustomEvent('CartMessage', {
            //         detail: {
            //             type: 'CartButtonClick',
            //             data: {
            //                 name: name,
            //                 cart: cart
            //             }
            //         }
            //     });
            //     window.dispatchEvent(event);
            // }
            //
            // function dropAndRiseAnimation(message, button) {
            //     addToCart(message);
            //     const animationBox = document.getElementById("animationBox");
            //     const animationText = document.getElementById("animationText");
            //
            //     // 计算按钮位置
            //     const buttonRect = button.getBoundingClientRect();
            //     const buttonTop = buttonRect.top + window.scrollY;
            //     const buttonLeft = buttonRect.left + window.scrollX;
            //
            //     // 显示动画元素
            //     animationBox.style.display = "block";
            //
            //     // 设置动态生成的文字
            //     animationText.textContent = "尊敬的客户,你选择的"+message+"已经加入购物车了,期待您的购买";
            //     //
            //     // // 设置动画元素位置
            //     animationBox.style.top = (buttonTop - 100) + "px";
            //     animationBox.style.left = (buttonLeft - 100) + "px";
            //
            //     // 添加动画效果
            //     animationBox.style.animation = "dropAndRise 10s";
            //
            //     // 在动画结束后隐藏动画元素，并重置动画
            //     setTimeout(function () {
            //         animationBox.style.display = "none";
            //         animationBox.style.animation = "";
            //         }, 10000);
            // }
        </script>
</body>

</html>